<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>简易记账簿</title>
    <meta name="keywords" content="Web,SSR,KeepAccounts"/>
    <meta name="description" content="Express,BootStrap"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/libs/bootstrap@5.2.3.css"/>
    <link rel="stylesheet" type="text/css" href="/libs/flatpickr.css"/>
</head>
<body>
    <div class="wrapper">
        <header class="d-flex align-items-center justify-content-between">
            <h5>我的简易记账簿·项目创建</h5>
            <button type="button" class="btn btn-primary btn-sm"
                    onclick="window.location.href='/accounts'">返回列表页</button>
        </header>
        <form action="/account" method="post" autocomplete="off">
            <div class="mb-3 row">
                <label class="col-sm-3 col-form-label label require" for="content">事项内容</label>
                <div class="col-sm-7">
                    <input class="form-control" id="content" name="content"
                           placeholder="输入限制20字符" maxlength="20"/>
                </div>
            </div>
            <div class="mb-3 row">
                <label class="col-sm-3 col-form-label label require" for="date">发生日期</label>
                <div class="col-sm-7">
                    <input class="form-control" id="date" name="date" placeholder="点击选择年月日"/>
                </div>
            </div>
            <div class="mb-3 row d-flex align-items-center">
                <label class="col-sm-3 col-form-label label require">收支类型</label>
                <div class="col-sm-2">
                    <input class="form-check-input" type="radio" id="type-income" name="type" value="1"/>
                    <label class="form-check-label" for="type-income">金钱收入</label>
                </div>
                <div class="col-sm-2">
                    <input class="form-check-input" type="radio" id="type-expend" name="type" value="0"/>
                    <label class="form-check-label" for="type-expend">金钱支出</label>
                </div>
            </div>
            <div class="mb-3 row">
                <label class="col-sm-3 col-form-label label require" for="money">金额数值</label>
                <div class="col-sm-7">
                    <input class="form-control" id="money" name="money"
                           placeholder="含小数点限制7字符" maxlength="7"/>
                </div>
            </div>
            <div class="mb-3 row">
                <label class="col-sm-3 col-form-label label" for="remark">备注信息</label>
                <div class="col-sm-7">
                    <textarea class="form-control" id="remark" name="remark"
                              placeholder="输入限制40字符" maxlength="40"></textarea>
                </div>
            </div>
            <div class="mb-3 d-flex align-items-center justify-content-center">
                <button class="btn btn-primary btn-sm operate" type="reset">清空重置</button>
                <button class="btn btn-primary btn-sm operate" type="submit">确认提交</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="/libs/bootstrap@5.2.3.js"></script>
    <script type="text/javascript" src="/libs/flatpickr@4.6.13.min.js"></script>
    <script type="text/javascript">
        flatpickr("#date", { dateFormat: "Y-m-d", maxDate: "today", defaultDate: "today" });
    </script>
</body>
</html>
